
import { Avatar } from 'antd-mobile'
import _, { isObject } from 'lodash'
import { FC } from 'react'
import { Link } from 'react-router-dom'
import { Card,  Tag , Image , ErrorBlock  } from 'antd-mobile'
import {  RightOutline , HeartOutline , FillinOutline ,LikeOutline } from 'antd-mobile-icons'
import { base } from '../util'
import dayjs from 'dayjs'

const styles = {
    center:{
        display:"flex",
        alignItems:'center',
        color:"#999"
    },
    flex:{
        display:"flex",
        alignItems:'center',
        justifyContent:'space-between',
        width:'100%',
        fontSize:16
    }
}
const MyListTwo:FC<{
    list:Array<getUserTypes>,
    hasAudio?:true,
    size?:number,
    type?:string,
    level?:boolean,
    hasAll?:boolean,
    isHot?:boolean,
    isTime?:boolean,
    
}> = ({
    list,
    hasAudio,
    size,
    type,
    level,
    hasAll,
    isHot,
    isTime
}) => {
    const onBodyClick = ()=>{

    }
    const onHeaderClick = ()=>{

    }
    const LevelTypes = [
        [
            { label: '简单', value: 1 },
            { label: '复杂', value: 2 },
            { label: '困难', value: 3 },
            { label: '地狱', value: 4 },
            { label: '无解', value: 5 },
        ]
    ]
    return (
        <div>
            {
                list.length> 0 ? 
                <div >
                {
                    _.map(list,(item,index)=>{
                        return (
                            <Link key={index} to={'/detail/'+item.msobj._id+"?canpany="+item.msobj.campany} >
                                <Card
                                    title={
                                        item.msobj.campany
                                    }
                                    extra={<RightOutline />}
                                    onBodyClick={onBodyClick}
                                    onHeaderClick={onHeaderClick}
                                    style={{ borderRadius: '16px' , marginTop:10 , border:'1px solid #ddd'}}
                                    >
                                    <div className='mt10' style={styles.center} >
                                        {/* <span>面试大侠:</span> */}
                                        <Avatar  style={{borderRadius:'50%','--size':'25px'}} src={item.msobj.author?.avatar?.replace(/public/,base) ??''}></Avatar>
                                        <span style={{fontSize:12}} className='ml10'>{item.msobj.author?.username}</span>
                                    </div>
                                    <div className='mt10' style={styles.center} >
                                         <div>
                                         面试地址: <span>{item.msobj.address}</span>
                                         </div>
                                    </div>
                                    {
                                        isTime &&<div className='mt10' style={styles.center} >
                                            <div  style={{color:isTime?"#f50":''}}>
                                            记录时间: <span>{dayjs(item.msobj.time).format('YYYY-MM-DD HH:mm') }</span>
                                            </div>
                                    </div>
                                    }
                                    <div className='mt10' style={styles.center} >
                                         <div  >
                                         面试时间: <span>{dayjs(item.msobj.date).format('YYYY-MM-DD HH:mm') }</span>
                                         </div>
                                    </div>
                                    
                                    <div className='mt10' style={styles.center} >
                                         <div style={{color:level?"#f50":''}}>
                                         面试难度: 
                                         <span >
                                            { _.find(LevelTypes[0],(v:any,index)=>v.value==item.msobj.level[0])?.label}
                                            {/* {
                                                LevelTypes[0][item.msobj.level[0]].label
                                            } */}
                                        </span>
                                         </div>
                                    </div>
                                    <div className='mt10' style={styles.center} >
                                         <div style={{color:isHot?"#f50":''}}>
                                         当前热度: <span>{ item.msobj.hot }</span>
                                         </div>
                                    </div>
                                    <div className=''  >
                                        <div className="tag-list" style={{display:'flex',flexWrap:'wrap'}}>
                                            {
                                                _.map(item.msobj.tags , (v,index)=>{
                                                    return (
                                                        <Tag className="mt10 mr10 " color={type==v.label?'#f50':'#2db7f5'}  style={{padding:2}}  key={index} >
                                                            {v.label}
                                                        </Tag>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                    {
                                        hasAll?
                                        <div className='imgone mt10 ' style={{marginTop:10}}>
                                            
                                            <Image style={{borderRadius:10,height:size?size:300}} src={isObject(item.msobj.imgs[0]) ? (item.msobj.imgs[0] as {imgSrc:string}).imgSrc?.replace(/public/, base) : (item.msobj.imgs[0] as string)?.replace(/public/, base)} />
                                            <audio style={{maxWidth:280}} className='mt10' src={ item.msobj.audioSrc?.replace(/public/,base)} controls ></audio>
                                        </div>
                                        :
                                        <div className='imgone mt10 ' style={{marginTop:10}}>
                                        {
                                            item.msobj.audioSrc ? <audio style={{maxWidth:280}} className='mt10' src={ item.msobj.audioSrc.replace(/public/,base)} controls ></audio>
                                            :
                                            <Image style={{borderRadius:10,height:size?size:300}} src={isObject(item.msobj.imgs[0]) ? (item.msobj.imgs[0] as {imgSrc:string}).imgSrc?.replace(/public/, base) : (item.msobj.imgs[0] as string)?.replace(/public/, base)} />
                                        }
                                        </div>
                                    }
                                    { <div className="mt10" >
                                        {
                                            item.msobj.content 
                                        }
                                    </div>}

                                    
                                    <div className="mt10">
                                        <div style={styles.flex}  > 
                                            <div style={styles.center}>
                                                <LikeOutline />
                                                <span>{item.msobj.likes}</span>
                                            </div>
                                            <div style={styles.center}>
                                                <HeartOutline />
                                                <span>{item.msobj.collects}</span>
                                            </div>
                                            <div style={styles.center}>
                                                <FillinOutline />
                                                <span>{item.msobj.pings}</span>
                                            </div>
                                        </div>
                                    </div>
                                </Card>
                            </Link>
                        )
                    })
                }
            </div>
            :
            <div className="empty" style={{marginTop:60}}>
                <ErrorBlock status='empty' 
                    title="暂无数据"
                />
            </div>
            }
        </div>
    )
}

export default MyListTwo